<template>
  <div style="padding: 0 20px">
    <zh-form>
      <zh-table
        ref="tableRef"
        rowId="roleId"
        style="width: 100%; textalign: 'center'; height: 100%"
        :disabled="false"
        :toolbarConfig="toolbarConfig"
        :data="tableData"
        :columns="tableColumn"
      >
        <!--自定义插槽 toolbar tools 插槽-->
        <template #toolbar_tools>
          <ep-button size="small" :disabled="editFlag" @click="openAdd"
            >新增</ep-button
          >
          <ep-button
            style="margin-left: 15px"
            :disabled="editFlag"
            type="danger"
            size="small"
            @click="tableDelete()"
            >删除</ep-button
          >
        </template>
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button size="samll" @click="editDetails(row)">编辑</ep-button>
            </span>
          </div>
        </template>
      </zh-table>
      <a-modal
        :title="modalTitle"
        centered
        style="top: 20px"
        width="55%"
        v-model="modalVisible"
        cancelText="关闭"
        okText="保存"
        wrapClassName="r-modal-wrap"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <zh-form
          :span="8"
          ref="rolePageFrom"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          :rules="rules"
        >
          <zh-card>
            <zh-input
              prop="b0302"
              :disabled="editFlag"
              type="text"
              label="设备名称"
              v-model="formData.b0302"
            />
            <zh-input
              prop="b0303"
              type="select"
              :disabled="editFlag"
              :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
              :options="dictData.B0303"
              label="设备类型"
              v-model="formData.b0303"
            />
            <zh-input
              prop="b0304"
              :disabled="editFlag"
              type="text"
              label="设备品牌"
              v-model="formData.b0304"
            />
            <zh-input
              prop="b0305"
              :disabled="editFlag"
              type="text"
              label="设备编码"
              v-model="formData.b0305"
            />
            <zh-input
              prop="b0306"
              :disabled="editFlag"
              type="text"
              label="维护单位"
              v-model="formData.b0306"
            />
            <zh-input
              prop="b0307"
              :disabled="editFlag"
              type="text"
              label="技术人员"
              v-model="formData.b0307"
            />
            <zh-input
              prop="b0308"
              :disabled="editFlag"
              type="text"
              label="联系方式"
              v-model="formData.b0308"
            />
            <zh-input
              prop="b0309"
              :disabled="editFlag"
              type="text"
              label="安装位置"
              v-model="formData.b0309"
            />
            <zh-input
              prop="b0310"
              :disabled="editFlag"
              type="text"
              label="接口地址"
              v-model="formData.b0310"
            />
            <zh-input
                prop="b0314"
                type="select"
                :disabled="editFlag"
                :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
                :options="dictData.B0314"
                label="接口状态"
                v-model="formData.b0314"
            />
            <zh-input
                prop="b0313"
                type="select"
                :disabled="editFlag"
                :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
                :options="dictData.B0313"
                label="是否展示"
                v-model="formData.b0313"
            />
          </zh-card>
        </zh-form>
        <template slot="footer">
          <ep-button @click="handleCancel">取消</ep-button>
          <ep-button @click="handleOk" type="save">保存</ep-button>
        </template>
      </a-modal>
    </zh-form>
  </div>
</template>

<script>
import { getBatchDict } from "@/services/system/api";
import modal from "ant-design-vue/es/modal";

export default {
  data() {
    return {
      dictData: {},
      editFlag: true,
      toolbarConfig: {
        custom: true,
        slots: {
          buttons: "toolbar_buttons",
          tools: "toolbar_tools",
        },
      },
      tableData: [],
      tableDataForDel: [],
      tableColumn: [
        { type: "checkbox", width: 50 },
        {
          type: "seq",
          width: 60,
          align: "center",
          title: "序号",
        },
        {
          field: "b0302",
          title: "设备名称",
          align: "center",
        },
        { field: "b0303Name", title: "设备类型", align: "center" },
        { field: "b0304", title: "设备品牌", align: "center" },
        { field: "b0305", title: "设备编码", align: "center" },
        { field: "b0306", title: "维护单位", align: "center" },
        { field: "b0307", title: "技术人员", align: "center" },
        { field: "b0308", title: "联系方式", align: "center" },
        { field: "b0309", title: "安装位置", align: "center" },
        { field: "b0310", title: "接口地址", align: "center" },
        { field: "b0314Name", title: "接口状态", align: "center" },
        { field: "b0313Name", title: "是否展示", align: "center" },
        {
          field: "operate",
          title: "操作",
          align: "center",
          width: 100,
          slots: {
            // 使用插槽模板渲染
            default: "operate",
          },
        },
      ],
      formData: {
        b0101: null,
        b0302: "",
        b0303: "",
        b0303Name: "",
        b0304: "",
        b0301: "",
        b0305: "",
        b0306: "",
        b0307: "",
        b0308: "",
        b0309: "",
        b0310: "",
        b0313: "",
        b0313Name: "",
        b0314: "",
        b0314Name: "",
      },
      modalTitle: "",
      modalVisible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      rules: {
        b0302: [{ required: true, message: "" }],
        b0303: [{ required: true, message: "" }],
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const params = {};
      params.dictFields = "B0303,B0313,B0314";
      this.$http.post(getBatchDict, params).then((res) => {
        let resultData = JSON.parse(JSON.stringify(this.dictData));
        resultData.B0303 = res.result.B0303;
        resultData.B0313 =res.result.B0313;
        resultData.B0314 =res.result.B0314;
        this.dictData = resultData;
      });
    },
    openAdd() {
      this.modalTitle = "新增监测设备";
      this.formData = {};
      this.showOrHide();
    },
    handleOk() {
      if (!this.formData.b0302 || !this.formData.b0303) {
        modal.error({ content: "设备名称或者设备类型不能为空" });
        return;
      }
      this.confirmLoading = true;
      this.dictData.B0303.forEach((item) => {
        if (item.dictKey === this.formData.b0303) {
          this.formData.b0303Name = item.dictValue;
        }
      });
      if (this.modalTitle === "新增监测设备") {
        this.formData.flag = "save";
        //在第一行插入数据
        if (this.tableData) {
          Object.assign(
            this.tableData,
            this.$refs.tableRef.getTableData().tableData
          );
        }
        this.$refs.tableRef.insertLast(
          JSON.parse(JSON.stringify(this.formData))
        );
      } else {
        if (this.formData.b0301) {
          this.formData.flag = "edit";
        }
      }
      this.showOrHide();
    },
    editDetails(row) {
      this.$nextTick(() => {
        this.modalTitle = "编辑监测设备";
        this.showOrHide();
        this.formData = row;
      });
    },
    handleCancel(e) {
      this.showOrHide();
    },
    showOrHide() {
      this.modalVisible = !this.modalVisible;
    },
    tableDelete() {
      if (this.$refs.tableRef.getAllCheckboxRecords().length === 0) {
        modal.warn({ title: "提示", content: "请至少选中一条数据" });
        return;
      }
      const delData = JSON.parse(
        JSON.stringify(this.$refs.tableRef.getAllCheckboxRecords())
      );
      delData.forEach((item) => {
        if (item.b0301) {
          this.tableDataForDel.push(item);
        }
      });
      //删除所选中的数据
      this.$refs.tableRef.removeCheckboxRow();
      //手动清空用户保留选中的行数据
      this.$refs.tableRef.clearCheckboxReserve();
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep .vxe-body--column {
  &:before {
    border-style: none !important;
  }
}
</style>
